<template>
  <div class="app-container" style="display: flex; flex-direction: column">
    <div ref="basic" style="padding: 0px 15px" class="basic-area">
      <div class="info-area">
        <span style="font-weight: 600; font-size: 18px; vertical-align: middle">批次名称：</span>
        <span style="vertical-align: middle">{{ ruleForm.batchName }}</span>
        <el-popover
          v-has-perm="['nljs_report_batch_view', 'nljs_report_record_view']"
          class="box-item"
          placement="bottom-start"
          trigger="click"
          width="70%"
        >
          <template #reference>
            <!-- @click="basicDialogVisible = true" -->
            <el-button style="vertical-align: middle; margin-left: 15px" link type="primary">
              查看详情
            </el-button>
          </template>
          <template #default>
            <el-descriptions class="descriptions" :column="4" :size="size" border>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">批次名称</div>
                </template>
                <span>{{ ruleForm.batchName }}</span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">批次描述</div>
                </template>
                <span>{{ ruleForm.batchDescription }}</span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">截止日期</div>
                </template>
                <span>{{ ruleForm.endTime }}</span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">数据告警阈值</div>
                </template>
                <span>{{ ruleForm.warningThreshold + '%' }}</span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">批次状态</div>
                </template>
                <el-tag :type="statusTag[ruleForm.status]">
                  {{ statusMap[ruleForm.status] }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">发布状态</div>
                </template>
                <el-tag :type="publishStatusTag[ruleForm.publishStatus]">
                  {{ publishStatusMap[ruleForm.publishStatus] }}
                </el-tag>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">创建人</div>
                </template>
                <span>{{ ruleForm.createBy }}</span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">创建时间</div>
                </template>
                <span>{{ ruleForm.createTime }}</span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">填报单位</div>
                </template>
                <span>{{ ruleForm.companyName }}</span>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">批次附件</div>
                </template>
                <manual-upload
                  key="upload1"
                  ref="upload1"
                  v-model="ruleForm.batchAttach"
                  class="upload-demo"
                >
                  <template #file="{ file }">
                    <div class="custom-file-item">
                      <span class="file-name" :title="file.name">{{ file.name }}</span>
                      <el-icon class="download-icon" @click="handleDownload(file)">
                        <Download />
                      </el-icon>
                    </div>
                  </template>
                </manual-upload>
              </el-descriptions-item>
              <el-descriptions-item>
                <template #label>
                  <div class="cell-item">记录附件</div>
                </template>
                <manual-upload
                  key="upload2"
                  v-model="ruleForm.attachmentIds"
                  class="upload-demo"
                  :auto-upload="true"
                  show-file-list
                  :limit="3"
                  :accept="accept.join(',')"
                  :on-success="handleChange"
                >
                  <el-button
                    v-if="userType !== '1' && submitStatus == 0"
                    type="primary"
                    plain
                    size="small"
                  >
                    附件上传
                  </el-button>
                  <template #file="{ file }">
                    <div class="custom-file-item">
                      <span class="file-name">{{ file.name }}</span>
                      <el-icon
                        v-if="userType !== '1'"
                        class="download-icon"
                        @click="handleRemove(file)"
                      >
                        <Close />
                      </el-icon>
                      <el-icon class="download-icon" @click="handleDownload(file)">
                        <Download />
                      </el-icon>
                    </div>
                  </template>
                </manual-upload>
              </el-descriptions-item>
              <template #extra></template>
            </el-descriptions>
          </template>
        </el-popover>
      </div>
      <div class="operation">
        <el-button v-hasPerm="['nljs_form_data_export']" type="success" plain @click="exportExcell">
          表单数据导出
        </el-button>
        <template v-if="userType == '1'">
          <el-button
            v-if="submitStatus == 1 && checkStatus == 0"
            v-hasPerm="['nljs_report_record_approve']"
            type="success"
            @click="check('1')"
          >
            通过
          </el-button>
          <el-button
            v-if="submitStatus == 1 && checkStatus == 0"
            v-hasPerm="['nljs_report_record_reject']"
            type="danger"
            @click="check('2')"
          >
            不通过
          </el-button>
        </template>
        <!-- 填报端 -->
        <template v-if="userType == '0'">
          <el-popover
            v-if="submitStatus == 0 && !isDeadLineDate(ruleForm)"
            placement="bottom"
            trigger="click"
            width="250px"
          >
            <template #default>
              <div v-if="formFileList.length > 0" class="icontent">
                <div
                  v-for="v in formFileList"
                  :key="v.detail.formName"
                  style="text-align: left; margin-bottom: 10px; display: flex; align-items: center"
                >
                  <div style="width: calc(100% - 70px); text-align: right; margin-right: 10px">
                    {{ v.detail.formName }}：
                  </div>
                  <input
                    :ref="`${v.detail.formName}${v.detail.id}`"
                    type="file"
                    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                    style="display: none;"
                    @input="fileChange($event, v)"
                  />
                  <el-button type="primary" size="small" plain @click="openFileDialog(v.detail)">
                    导入
                  </el-button>
                </div>
              </div>
              <div v-else>
                <span class="null-tip">当前表单尚未配置模板，请联系管理员上传模板附件！</span>
              </div>
            </template>
            <template #reference>
              <el-button type="warning" plain>表单数据导入</el-button>
            </template>
          </el-popover>
          <el-popover placement="bottom" trigger="click">
            <template #default>
              <div v-if="formFileList.length > 0">
                <div
                  v-for="v in formFileList"
                  :key="v.detail.formName"
                  style="text-align: left; margin-bottom: 10px"
                >
                  <el-button type="primary" link @click="handleDownload(v, v.original)">
                    {{ v.detail.formName }}
                  </el-button>
                </div>
              </div>
              <div v-else>
                <span class="null-tip">当前表单尚未配置模板，请联系管理员上传模板附件！</span>
              </div>
            </template>
            <template #reference>
              <el-button type="danger" plain>模板下载</el-button>
            </template>
          </el-popover>
          <el-button
            v-if="submitStatus == 0 && !isDeadLineDate(ruleForm)"
            v-has-perm="['nljs_form_data_add', 'nljs_form_data_edit']"
            size="default"
            :loading="saveLoading"
            @click="save"
          >
            保存
          </el-button>
          <el-button
            v-if="submitStatus == 0 && !isDeadLineDate(ruleForm)"
            v-has-perm="['nljs_report_record_submit']"
            type="primary"
            :loading="saveLoading"
            @click="submit('1')"
          >
            提交
          </el-button>
          <el-button
            v-if="
              submitStatus == 1 &&
              (checkStatus == 0 || checkStatus == 2) &&
              !isDeadLineDate(ruleForm)
            "
            v-has-perm="['nljs_report_record_withdraw']"
            type="danger"
            @click="submit('2')"
          >
            撤回
          </el-button>
        </template>
      </div>
    </div>
    <div
      v-loading="formDataLoading"
      v-has-perm="['nljs_form_data_view']"
      class="table-content"
      style="display: flex; flex: 1"
    >
      <el-tabs v-model="activeTab" :tab-position="tabPosition" type="border-card" class="tabs">
        <el-tab-pane
          v-for="formId in formIds"
          :key="formId"
          :label="labelMap[formId]"
          :name="formId"
        ></el-tab-pane>
      </el-tabs>
      <div style="flex: 1" class="form-content">
        <template v-for="item in localFormDatas" :key="item.formId">
          <KeepAlive>
            <component
              :is="componentMap[item.formId]"
              v-if="activeTab == (item as any).formId"
              :id="formDataMap[item.formId].id"
              :ref="`form${item.formId}`"
              :formId="item.formId"
              :batchInfo="ruleForm"
              :readonly="userType === '1' || submitStatus != 0 || isDeadLineDate(ruleForm)"
            />
          </KeepAlive>
        </template>
        <dynamic-form
          v-show="activeTab && !componentMap[activeTab]"
          ref="dynamicFormRef"
          v-model:activeTab="activeTab"
          :formDataMap="excelFormData"
          :labelMap="labelMap"
          :batchInfo="ruleForm"
          :readonly="userType === '1' || submitStatus != 0 || isDeadLineDate(ruleForm)"
        ></dynamic-form>
      </div>
    </div>
    <!-- <file-preview ref="filePreviewRef" /> -->
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: 'Fill',
  inheritAttrs: false,
});
import { useRoute } from 'vue-router';
import type { TabsInstance, ComponentSize } from 'element-plus';
import { reactive, ref } from 'vue';
import JSZip from 'jszip';
import { useUserStore } from '@/store';
import FormDataAPI from '@/api/batch/formData.api';
import BatchAPI from '@/api/batch/batch.api';
import RecordAPI from '@/api/batch/record.api';
import FileAPI from '@/api/system/file.api';
import DynamicForm from './dynamicForm.vue';
import { debounce } from '@/utils';
import { accept } from '@/utils/validate';
import { getCurrentDateFormatted } from '@/utils/date';
import FormAPI from '@/api/batch/form.api';
import ManualUpload from '@/components/Upload/ManualUpload.vue';
const basic = ref();
const contentHeight = ref<string>(''); // 表格高度
const currentInstance = getCurrentInstance();
let basicResize: any = null;

// const activeNames = ref<string>('1');
// const basicDialogVisible = ref<boolean>(false);
const statusTag = reactive<any>({
  0: 'danger', // 关闭
  1: 'success', // 开启
});
const statusMap = reactive<any>({
  0: '关闭',
  1: '开启',
});
const publishStatusTag = reactive<any>({
  0: 'warning', // 待发布
  1: 'success', // 已发布
});
const publishStatusMap = reactive<any>({
  0: '待发布',
  1: '已发布',
});
const dynamicFormRef = ref<any>();
const route = useRoute(); // 获取路由参数
const size = ref<ComponentSize>('default');
const tabPosition = ref<TabsInstance['tabPosition']>('top');
const activeTab = ref('');
const saveLoading = ref<boolean>(false); // 保存按钮loading
const labelMap = reactive<any>({
  // 1: '容量电费结算情况',
  // 2: '煤电机组容量电费扣减情况',
  // 3: '科目余额',
  // 2: '基本信息及建设成本',
  // 3: '财务成本',
  // 4: '运维成本及折旧费用',
  // 5: '运行情况',
  // 7: '容量电费结算情况',
  // 8: '煤电机组容量电费扣减情况',
  // 10: '电源匹配表',
  // 11: '电源侧明细',
  // 12: '销售侧明细',
  // 13: '市场化交易明细',
  // 14: '原工商业目录电价',
  // 15: '与国网结算表',
  // 16: '工商业影响分析',
  // 17: '居民农业影响',
  // 18: '科目余额',
});
const componentMap: any = {
  '1': defineAsyncComponent({
    loader: () => import('@/views/ndarc/coal-power/charge-settlement.vue'),
    delay: 10,
  }),
};
// 所需参数
let batchId: any = route.query.batchId; // 批次id
let recordId: any = route.query.recordId; // 填报记录id
const submitStatus: any = ref('1'); // 填报状态 0-草稿 1-已提交
const checkStatus: any = ref('0'); // 审核状态 0-未审核 1-通过 2-不通过
const formDataMap = ref<any>({}); // 表单数据
const formFileList = ref<any>([]); // 表单附件
const formsMap: any = {
  // '通用': 'commonForms', // 通用
  燃煤: 'coalForms',
  水电: 'waterElectricityForms',
  光伏: 'photovoltaicForms',
  生物质: 'biomassForms',
  风电: 'windPowerForms',
  燃气: 'gasForms',
  储能: 'energyStorageForms',
  热电联产: 'cogenerationForms',
};
let formIdsRes: any = []; // 表单名称
const userType = ref('0'); // 用户类型
const recordInfo = ref<any>({}); // 填报记录信息
// 批次信息
const ruleForm = ref<any>({});
// 表单类型
let formIds: any = ref([]);

const batchFileList = ref<any>([]); // 批次附件列表(只能查看和下载)
const recordFileList = ref<any>([]); // 填报记录上传附件
const instance: any = getCurrentInstance();

// const handleCollapseChange = () => {};
// 获取填报批次详情
const getBatchDetail = () => {
  return BatchAPI.getBatchDetail(batchId).then((data: any) => {
    const { commonForms = [] } = data;
    formIdsRes = commonForms.concat(
      formsMap[recordInfo.value.energyType] ? data[formsMap[recordInfo.value.energyType]] : []
    );
    formIdsRes.forEach((item: any) => {
      labelMap[item.formId] = item.formName;
    });
    console.log('formRes-', formIdsRes);
    data.batchAttach = data.attachmentIds;
    delete data.attachmentIds;
    Object.assign(ruleForm.value, data);
    if (data.attachmentIds) {
      getBatchFileList(data.attachmentIds.split(','), '1');
    }
  });
};
const getBatchFileList = (batchIds: string[] | number[], type: string) => {
  let ids: any = [];
  for (let i = 0; i < batchIds.length; i++) {
    if (batchIds[i] && batchIds[i] !== 'null') {
      ids.push(batchIds[i]);
    }
  }
  FileAPI.getBatchFileList(ids).then((data) => {
    if (type == '1') {
      batchFileList.value = data.map((item: any) => {
        return {
          name: item.original, // fileName
          url: item.url,
          type: item.type,
          uid: item.id,
        };
      });
    } else {
      recordFileList.value = data.map((item: any) => {
        return {
          name: item.original, // fileName
          url: item.url,
          type: item.type,
          uid: item.id,
        };
      });
    }
  });
};
// 获取填报记录详情(获取填报与审核状态)
const getRecordInfo = async () => {
  recordInfo.value = await RecordAPI.getRecordInfo(recordId);
  console.log('recordInfo.value-', recordInfo.value);

  ruleForm.value.companyName = recordInfo.value.companyName;
  ruleForm.value.attachmentIds = recordInfo.value.attachmentIds;
  if (recordInfo.value.attachmentIds) {
    getBatchFileList(recordInfo.value.attachmentIds.split(','), '2');
  }
  submitStatus.value = recordInfo.value.submitStatus;
  checkStatus.value = recordInfo.value.auditStatus;
};
/**
 * 初始化表单数据
 * 1.获取批次关联的表单ID列表
 * 2.获取填报记录的表单数据
 * @param flag
 */
const formDataLoading = ref<boolean>(false);
const getFormData = async (flag: boolean = false) => {
  formDataLoading.value = true;
  try {
    const res: any = await FormDataAPI.getFormDataByRecordId(recordId); // 填报记录表单数据

    const templateData: any = {};
    for (const key in formIdsRes) {
      console.log('key-', key);
      const v = formIdsRes[key];
      const matchData = res.find((item: any) => item.formId == v.formId);
      const formDefine = await FormAPI.getDefinitionDetail(v.formId as any);
      templateData[v.formId] = {
        readonly: false,
        formId: v.formId,
        recordId: recordId,
        id: matchData?.id, // 无值-首次进入 有值-之前保存过
        detail: formDefine, // 表单定义数据 schemaJson attachmentIds 等
      };
    }
    formDataMap.value = templateData;
    await initFormDataFileList();
    formIds.value = formIdsRes.map((item: any) => item.formId);
    if (!flag) {
      activeTab.value = formIds.value[0];
    }
  } catch (error) {
    console.error(error);
  } finally {
    formDataLoading.value = false;
  }
};
const initFormDataFileList = async () => {
  formFileList.value = [];
  for (const key in formDataMap.value) {
    const item = formDataMap.value[key];
    const attachmentIds = item.detail.attachmentIds;
    if (!attachmentIds) {
      continue;
    }
    formFileList.value.push({
      name: '', // fileName
      uid: attachmentIds,
      formDataId: item.id,
      detail: item.detail,
      info: item,
    });
  }
  if(!formFileList.value.length){
    return false;
  }
  const fileArr = formFileList.value.map((v: any) => v.uid);
  FileAPI.getBatchFileList(fileArr).then((data: any) => {
    if (!data || !data.length) {
      return;
    }
    formFileList.value.forEach((element: any) => {
      const matchData = data.find((item: any) => item.id == element.uid);
      const extendtion = matchData.original.split('.').pop(); // 文件后缀
      if (matchData) {
        element.name = element.detail.formName + '.' + extendtion;
      }
    });
  });
};
// flag 是否获取本地的
const getFormDataByType = (flag: boolean): (() => any) => {
  return () => {
    const localFormDatas = [];
    const map: any = {};
    for (const key in formDataMap.value) {
      const item = formDataMap.value[key];
      const exit = componentMap[item.formId];
      if (flag && exit) {
        localFormDatas.push(item);
      } else if (!flag && !exit) {
        map[item.formId] = item;
      }
    }
    return flag ? localFormDatas : map;
  };
};
const localFormDatas = computed(getFormDataByType(true));
const excelFormData = computed(getFormDataByType(false));
// 表单数据操作
// 审核通过或者不通过
function check(state: any) {
  if (state == '1') {
    RecordAPI.approveRecord(recordId).then(() => {
      ElMessage({
        type: 'success',
        message: '通过成功',
      });
    });
    setTimeout(() => {
      getRecordInfo();
    }, 300);
  } else {
    ElMessageBox.prompt(`确认不通过?`, '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      showInput: true,
      inputType: 'textarea',
      inputValue: '', // 初始值
      inputErrorMessage: '不通过原因不能为空',
      inputPattern: /^.+$/, // 正则表达式，不能为空
      inputPlaceholder: '请输入不通过原因',
      type: 'warning',
    })
      .then(({ value }) => {
        console.log('val-', value);
        RecordAPI.rejectRecord(recordId, { reason: value }).then(() => {
          ElMessage({
            type: 'success',
            message: '不通过成功',
          });
        });
        setTimeout(() => {
          getRecordInfo();
        }, 300);
      })
      .catch(() => {});
  }
}
// 提交或者撤回
async function submit(state: any) {
  if (state == '1') {
    await save();
  }
  const API = state == '1' ? RecordAPI.submitRecord : RecordAPI.withdrawRecord;
  await API(recordId);
  ElMessage.success(`${state === '1' ? '提交' : '撤回'}成功`);
  submitStatus.value = state;
  setTimeout(() => {
    getRecordInfo();
  }, 300);
}
// 校验是否保存
// const validateIsSave = () => {

// 保存
async function save() {
  saveLoading.value = true;
  try {
    for (let i = 0; i < localFormDatas.value.length; i++) {
      const item = formDataMap.value[formIds.value[i]];
      const refForm = instance.refs[`form${item.formId}`];
      // if (refForm && refForm[0].validate && !refForm[0].validate()) {
      //   return ElMessage.error(`${labelMap[item.formId]}表单校验不通过`);
      // }
      const param = { ...item };
      console.log('refForm-', refForm);

      if (refForm && refForm[0]) {
        const { formData = {}, jsonSchema = {} } = await refForm[0].getValue();
        param.formData = JSON.stringify(formData || {}); // 表单数据(JSON格式)
        param.jsonSchema = JSON.stringify(jsonSchema || {}); // 表单结构定义JSON(存储表单结构或报表模板定义)
        console.log('param', param);
        if (item.id) {
          await FormDataAPI.updateFormData(param);
        } else {
          await FormDataAPI.addFormData(param);
        }
        if (refForm[0] && refForm[0].refreshData) {
          refForm[0]?.refreshData();
        }
      }
    }
    const dynamicFormRef = instance.refs['dynamicFormRef'];
    const result = await dynamicFormRef.getValue();
    for (let i = 0; i < result.length; i++) {
      const param = { ...result[i] };
      param.recordId = recordId;
      param.formData = JSON.stringify(param.formData || {}); // 表单数据(JSON格式)
      param.jsonSchema = JSON.stringify(param.jsonSchema || {}); // 表单结构定义JSON(存储表单结构或报表模板定义)
      if (param.id) {
        await FormDataAPI.updateFormData(param);
      } else {
        await FormDataAPI.addFormData(param);
      }
    }
    console.log(result);
    ElMessage.success('保存成功');
    saveLoading.value = false;
    getFormData(true);
  } catch (error) {
    saveLoading.value = false;
    console.error('Error:', error);
  }
}
async function initData() {
  await getRecordInfo();
  await getBatchDetail();
  getFormData();
}

// excel导入
const fileChange = async (event: any, form: any) => {
  const file = event.target.files[0];
  event.target.value = '';
  formDataLoading.value = true;
  try {
    await dynamicFormRef.value?.importFile(file, form);
  } catch (error) {
    console.error('Error:', error);
  } finally {
    formDataLoading.value = false;
  }
};
// 打开文件选择框
const openFileDialog = (form: any) => {
  (<any>currentInstance?.refs[`${form.formName}${form.id}`])[0].click();
};
const exportExcell = async () => {
  const jszip: any = new JSZip();
  for (let i = 0; i < formFileList.value.length; i++) {
    const item = formFileList.value[i];
    if (!item.formDataId || !item.uid) continue;
    const res: any = await FormDataAPI.exportFormData(item.formDataId);
    await jszip.file(`${item.detail.formName}.xlsx`, res.data.arrayBuffer());
  }
  const blob = await jszip.generateAsync({
    type: 'blob',
    compression: 'STORE', // 压缩算法（STORE=不压缩）
  });
  const url = window.URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  // eslint-disable-next-line no-useless-escape
  const regex = /[\/\:\\\*\?"<>\|]/g;
  // 替换非法字符为下划线，并处理连续多个下划线
  const sanitized = ruleForm.value.batchName
    .replace(regex, '_')
    .replace(/_+/g, '_') // 合并连续下划线
    .replace(/^_+/, '') // 去除开头下划线
    .replace(/_+$/, ''); // 去除结尾下划线
  a.download = sanitized + '-' + getCurrentDateFormatted('') + '.zip';
  a.click();
  window.URL.revokeObjectURL(url);
  a.remove();
};
const handleDownload = (file: any, flag?: any) => {
  console.log('filed-', file);
  return FileAPI.downloadFile(file.uid, file.name, flag);
};
const handleChange = () => {
  console.log('change-');
  const params = {
    ...recordInfo.value,
  };
  RecordAPI.updateRecord(params).then(() => {
    ElMessage.success('上传成功');
    getRecordInfo();
  });
};
const handleRemove = (file: any) => {
  console.log('rm-file-', file);
  FileAPI.deleteByIds([file.uid]).then(() => {
    const idsArr = recordInfo.value.attachmentIds.split(',');
    idsArr.splice(idsArr.indexOf(file.uid), 1);
    const params = {
      id: recordInfo.value.id,
      attachmentIds: idsArr.join(','),
    };
    RecordAPI.updateRecord(params).then(() => {
      ElMessage.success('删除成功');
      getRecordInfo();
    });
  });
};
function isDeadLineDate(row: any) {
  const date = new Date(row.endTime);
  const nowDate = new Date();
  return date < nowDate || row.status == 0;
}
function shortSave(event: any) {
  if (submitStatus != 0 || isDeadLineDate(ruleForm)) {
    return;
  }
  if (event.key === 's' && event.ctrlKey) {
    save();
    console.log('Ctrl+C 被按下');
    // 阻止默认行为，例如文本复制
    event.preventDefault();
  }
}
onMounted(() => {
  formDataLoading.value = true;
  userType.value = useUserStore().userInfo.roles.find((id: any) => id === '1') ? '1' : '0';
  initData();
  basicResize = useResizeObserver(
    basic,
    debounce((entries: any) => {
      console.log('entries-', entries);
      // -410.375px
      contentHeight.value = `calc(100vh - ${entries[0].contentRect.height + 140}px)`;
    })
  );
  document.addEventListener('keydown', shortSave);
});
onBeforeUnmount(() => {
  console.log('fill3', basicResize?.stop);
  // cleanup() stopWatch()
  basicResize?.stop && basicResize?.stop();
  document.removeEventListener('keydown', shortSave);
});
onBeforeRouteUpdate((to, from, next) => {
  initData();
  next();
});
</script>

<style lang="scss" scoped>
.app-container {
  padding: 10px;
  height: 100%;
}

.info-area {
  margin: 10px 0;
}
.basic-area {
  padding: 0 10px 0;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
}

:deep(.basic-area) {
  .el-descriptions__header {
    margin: 0px;
  }

  .el-collapse-item__content {
    padding-bottom: 0px !important;
  }

  .el-collapse-item__header {
    font-size: 16px;
    font-weight: 600;
  }
}

.table-content {
  margin-top: 10px;
  padding: 15px 10px 10px;
  border: 1px solid #e4e7ed;
  border-radius: 8px;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

.form-content {
  flex: 1;
  width: 100%;
  padding-top: 10px;
  height: calc(100% - 41px);
}

:deep(.el-tabs__content) {
  display: none;
}

.tabs {
  :deep(.el-tabs__item.is-active) {
    background: rgba(230, 240, 255, 0.6);
  }
}

.cell-item {
  display: flex;
  align-items: center;
}

.row-btn {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

.btns {
  display: flex;
  flex-direction: column;
}

.operation {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.operation > div {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-left: 10px;
}
.icontent{
  padding-top: 10px;
  margin-top: -12px;
  margin-bottom: -12px;
}
.null-tip{
  color: #f76560;
}
.attachment {
  .a-title {
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #606266;
  }

  display: flex;
  align-items: center;
}

.upload-demo {
  display: flex;
  align-items: center;
  margin-left: 5px;
}

.custom-file-item {
  display: flex;
  align-items: center;
  cursor: pointer;

  .file-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .file-name:hover {
    color: rgb(159, 183, 241);
  }
}

.download-icon {
  margin-left: 10px;
}

.upload-demo2 {
  display: flex;
  align-items: center;
  margin-left: 10px;

  .el-upload__tip {
    margin-left: 7px;
  }
}

:deep(.el-upload-list--text) {
  width: 200px !important;
}

.download-url {
  font-size: 14px;
  color: #5b5f66;
}

.download-url:hover {
  text-decoration: none;
  cursor: pointer;
  color: rgb(68, 169, 68);
}
</style>
